<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课网之解密IconFont字体图标</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- font class的方式 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1722314_5loj9nfs578.css">

    <!-- unicode方式的图标使用 -->
    <link rel="stylesheet" href="css/font.css">

    <!-- symbol方式的图标使用 -->
    <script type="text/javascript" src="http://at.alicdn.com/t/font_1722314_5loj9nfs578.js"></script>
</head>
<body>
    <div class="main">
        <!-- 顶部导航栏 -->
        <ul class="top-menu">
            <li>首页</li>
            <li>课程</li>
            <li>路径</li>
            <li>实践</li>
            <li>手机</li>
            <li>猿问</li>
        </ul>
        <!-- 中间部分，左右两侧 -->
        <div class="two">
            <ul class="left-li">
                <li>前端开发</li>
                <li>后端开发</li>
                <li>移动开发</li>
                <li>数据库</li>
                <li>云计算<br>&大数据</li>
                <li>运维<br>&测试</li>
                <li>UI设计</li>
            </ul>
            <div class="right">
                <ul>
                    <!-- 使用font class的方式使用字体图标 -->
                    <li><span class="iconfont iconwuxianwang fontSize1"></span><br>HTML</li>
                    <li><span class="iconfont icongongjiaoche fontSize1"></span><br>CSS</li>
                    <li><span class="iconfont iconapple fontSize1"></span><br>iconfont</li>
                    <li><span class="iconfont iconandroid fontSize1"></span><br>HTML</li>
                    <li><span class="iconfont iconalipay-paymentcode fontSize1"></span><br>CSS</li>
                    <li><span class="iconfont iconcamera-fill fontSize1"></span><br>iconfont</li>
                    <li><span class="iconfont iconchrome fontSize1"></span><br>HTML</li>
                    <li><span class="iconfont iconeuro fontSize1"></span><br>CSS</li>
                    <li><span class="iconfont iconcodepen-fill-round fontSize1"></span><br>iconfont</li>
                    <li><span class="iconfont iconfreebsd-devil fontSize1"></span><br>HTML</li>
                    <li><span class="iconfont icongithub-fill-round fontSize1"></span><br>CSS</li>

                    <!-- 使用 unicode的方式使用字体图标 -->
                    <li><span class="iconfont fontSize1">&#xe68b;</span><br>iconfont</li>
                    <li><span class="iconfont fontSize1">&#xe68c;</span><br>HTML</li>
                    <li><span class="iconfont fontSize1">&#xe68d;</span><br>CSS</li>
                    <li><span class="iconfont fontSize1">&#xe68e;</span><br>iconfont</li>
                    <li><span class="iconfont fontSize1">&#xe68f;</span><br>HTML</li>
                    <li><span class="iconfont fontSize1">&#xe690;</span><br>CSS</li>
                    <li><span class="iconfont fontSize1">&#xe691;</span><br>iconfont</li>

                    <!-- 使用symbol方式 -->
                    <li>
                        <span>
                            <svg class="icon fontSize" aria-hidden="true">
                                <use xlink:href="#iconf-apk"></use>
                            </svg>
                        </span>
                        <br>HTML
                    </li>
                    <li>
                        <span>
                         <svg class="icon fontSize" aria-hidden="true">
                            <use xlink:href="#iconf-zip"></use>
                        </svg>
                        </span>
                        <br> CSS
                    </li>
                    <li>
                        <span>
                            <svg class="icon fontSize" aria-hidden="true">
                                <use xlink:href="#iconf-gif"></use>
                            </svg>
                        </span>
                        <br>iconfont
                    </li>

                </ul>
            </div>
        </div>
        <!-- 底部 -->
        <ul class="bottom-tab">
            <li><span class="iconfont iconsnapchat"></span><br>首页</li>
            <li><span class="iconfont iconpython"></span><br>手记</li>
            <li><span class="iconfont iconreddit"></span><br>我的学习</li>
            <li><span class="iconfont iconwindows"></span><br>账号</li>
        </ul>
    </div>
</body>
</html>
